<template>
  <view>
    <view style="background-color: white; border-radius: 15rpx; margin: 20rpx">
      <view style="height: 100rpx"></view>
      <view style="text-align: center">
        <view style="color: gray">支付金额</view>
        <view style="color: red; font-size: 60rpx; margin-top: 40rpx"
          >￥222.00</view
        >
      </view>
      <view style="height: 100rpx"></view>
      <!-- //支付方式 -->
      <view>
        <view
          style="display: flex; justify-content: space-between; margin: 20rpx"
        >
          <view style="display: flex">
            <image
              src="/static/imgs/ye.png"
              style="width: 60rpx; height: 60rpx"
            ></image>
            <view style="margin-left: 30rpx"
              >余额支付
              <text style="color: gray; font-size: 30rpx"
                >(余额：￥0)</text
              ></view
            >
          </view>
          <view>
            <u-radio-group
              v-model="radiovalue1"
              placement="column"
              @change="groupChange"
            >
              <u-radio
                :customStyle="{ marginBottom: '40px' }"
                v-for="(item, index) in radiolist1"
                :key="index"
                :label="item.name"
                :name="item.name"
                @change="radioChange"
              >
              </u-radio>
            </u-radio-group>
          </view>
        </view>

        <view
          style="
            display: flex;
            justify-content: space-between;
            margin: 20rpx;
            margin-top: -140rpx;
          "
        >
          <view style="display: flex">
            <image
              src="/static/imgs/wxzf.png"
              style="width: 60rpx; height: 60rpx"
            ></image>
            <view>微信支付 </view>
          </view>
        </view>
      </view>

      <!-- //支付按钮 -->
      <view class="zfbnt1">
        <view class="zfbtn2"> 立即支付 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radiolist1: [
        {
          name: "",
          disabled: false,
        },
        {
          name: "",
          disabled: false,
        },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: "苹果",
    };
  },
};
</script>

<style lang="less">
.zfbtn2 {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 50rpx;
  background-color: red;
  color: white;
  font-size: 30rpx;
  margin-top: 200rpx;
  margin-bottom: 50rpx;
  margin-right: 20rpx;
}
.zfbnt1 {
  display: flex;
  justify-content: center;
  margin-top: 50rpx;
}
page {
  background-color: #f1f1f1;
}
</style>
